import 'package:accounter/components/Home.dart';
import 'package:flutter/material.dart';

class IndexPagePage extends StatefulWidget {
  const IndexPagePage({super.key, required this.title});
  final String title;

  @override
  State<IndexPagePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<IndexPagePage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  late final Animation<double> _animation;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    // 动画Controller，可以控制动画的开始，停止等操作,首次先执行一次动画
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 500))
      ..forward();
    // Curves.bounceOut弹跳退出效果
    _animation = Tween<double>(begin: 1, end: 24)
        .chain(CurveTween(curve: Curves.bounceOut))
        .animate(_animationController);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        bottomNavigationBar: AnimatedBuilder(
            animation: _animationController,
            builder: (context, child) {
              return BottomNavigationBar(
                currentIndex: _currentIndex,
                type: BottomNavigationBarType.fixed,
                onTap: (value) {
                  if (value == 2) {
                    _animationController.reset();
                    return ;
                  }
                  _currentIndex = value;
                  // 需要先清除上一个动画，forward才能生效，不让动画已经解释了，此时的value不会变了
                  _animationController.reset();
                  _animationController.forward();
                },
                items: _buildBottomBarItem,
              );
            }),

// 链接：https://juejin.cn/post/7295169886179000329
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.cyan[300],
          title: Text(widget.title),
        ),
        body: Home(),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          backgroundColor: Colors.amber,
          tooltip: '添加新项',
          shape: const CircleBorder(),
          child: const Icon(
            Icons.add,
            size: 30,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation
            .centerDocked, // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }

  // 生成底部导航按钮
  List<BottomNavigationBarItem> get _buildBottomBarItem {
    return [
      BottomNavigationBarItem(
          icon: const Icon(
            Icons.person,
          ),
          activeIcon: Icon(
            Icons.person,
            size: _animation.value,
          ),
          label: '首页'),
      BottomNavigationBarItem(
          icon: const Icon(
            Icons.person,
          ),
          activeIcon: Icon(
            Icons.person,
            size: _animation.value,
          ),
          label: '搜索'),
      // 中间这个使用空白占位
      const BottomNavigationBarItem(icon: SizedBox(height: 24), label: ''),
      BottomNavigationBarItem(
          icon: const Icon(
            Icons.person,
          ),
          activeIcon: Icon(
            Icons.person,
            // 设置激活图标的大小
            size: _animation.value,
          ),
          label: '我的'),
      BottomNavigationBarItem(
          icon: const Icon(
            Icons.person,
          ),
          activeIcon: Icon(
            Icons.person,
            size: _animation.value,
          ),
          label: '我的'),
    ];
  }

// 链接：https://juejin.cn/post/7295169886179000329
}
